As I’m sure many of you well know, page speed has become a factor for ranking in the search engines. Although, for the engines it’s not a make or break factor but I’ve always felt that it is for visitors.
With a huge number of people using super fast broadband (and it’s growing), patience for slow loading websites is being to fray. I personally hate waiting for a page to load and I’m sure my visitors do as well.
That’s why if you’re investing lots of time and money into getting the rankings you deserve, you shouldn’t be blowing it by having a slow website.
That’s why I want to share some practical advice I’ve learnt from optimising my websites loading times. If you don’t have a website development background don’t worry, I’ll keep everything clear (but if not, feel free to send it to your website team). So let’s get started.
Tools to Use
As every SEO knows, tools makes our lives easier. And in this situation, it’s no different. The easiest tool(s) I’ve found are the YSlow and Page Speed Plugins for Firefox/Firebug.
Once you have these installed then you’re good to go. In Firefox go to the website that you’re wanting to optimise. Click on the Firebug icon in your add on bar (shown below) to open up the firebug console. Then click on the Page Speed tab and then the Analyse Performance Tab. In a few seconds you’ll get a score out of 100. The aim; get as close to 100 as possible. Most likely you’ll already be around the 70/80 mark.
Using these tools I’ve taken one of my wall clock sites to a good 90/100 and much faster loading times.
The handy thing about the Page Speed plugin is that it will give you additional information if you click into each of the sections and each section is colour coded as to how good or bad it is. Red bad, yellow ok, green great. Easy enough.
What You Can Do
Some of the most common places I see that people don’t optimise are below. I’ll go through each one and explain how you can fix it.
Minify CSS
CSS (cascading style sheets; the files that make your website pretty) is a commonly overlooked one, for any reasonable site, CSS files can have a couple of hundred to tens of thousands of lines of code. Each tab, space, additional comma, line break & code comment adds to your file size. Although they make it easier for the people working in the code, it can slow your website down.
The solution to this is to keep an original copy for the developers to work in and then have them minify (remove all the unnecessary bits) the code for the live website. You can expect a 20-30% saving on average. Which on large files can help a lot!
Page Speed has a built in compressor, but you can also use a tool like CSSminifier.
On the maximum compression you can achieve much higher savings.
Minify JavaScript
Again, many people forget to compress their JavaScript, all those spaces, etc add up and on large files can use lots of space. Even more so these days now that JavaScript libraries such as jQuery and mooTools have become widespread.
PageSpeed also has a built in compressor with the saving shown.
Minimise File Requests
Each request that your website makes to the server to get a file the more it will slow the loading of the page down. So the more requests you make the slower things will be.
When you (or your team) comes to building a website, think about where you can avoid using images for effects and instead use CSS. Just a few example are gradients, buttons, rounded corners and many more. All of which can be achieved using CSS.
This also includes the requests you make for CSS files and JavaScript files. Consider the following:
You can see that there are many requests for JavaScript files here. All of which can be combined into a single file that is requested once.
We’ll talk more about minimizing file requests for images in CSS Sprites.
Leverage Browser Caching
Not only can you minimize files but you can make the users browser cache (or download and use a local copy) of your files rather than reloading them each time. This saves on requests and also makes loading for returning visitors quicker.
Check out Google’s page on caching – https://code.google.com/speed/page-speed/docs/caching.html
Minimize Redirects
Redirections take time. The more you have, the longer it takes your user to get to the page you are redirecting them to.
Avoid using them where ever you can.
Optimise Images
This is one that is also commonly overlooked. If your website has lots of images or large images then they will take time to load. Knowing what file type to save your image as is half the battle. In Photoshop or Fireworks, the export wizard for images will tell you what the file size will be in bytes or kilobytes.
Simple images tend to be smaller in the PNG format, whereas more complex images tend to be better in JPG. There is also varying levels of quality that you can export. Why export at the maximum quality of JPG if there’s no noticeable difference between that and medium.
Going through your pre-existing images may take a while but the savings help. Especially if you have a popular website and are paying for bandwidth.
There is also a saving to be had by exporting images using Fireworks over Photoshop. This article proves the point perfectly (http://webdesignerwall.com/general/fireworks-vs-photoshop-compression).
But just to save you the time, here’s the sum up (this was just his background image):
“If I export the background with Fireworks, I can reduce its file size by 20 kb. I get about 16,000 visits per day on average. 20 kb x 16, 000 = 320, 000 kb. Yes, that is 320 megabytes per day!”
Avoid Bad CSS
CSS is easy to learn but very hard to master, there are some great websites out there for learning how to write better CSS that’s more efficient that you or your developer should read. I can almost guarantee that everyone has something to learn.
A fantastic site for learning more about CSS is CSS Tricks but you will find hundreds if you do a quick Google search.
Enable Compression
You can also enable Gzip or deflate on your server. This will reduce the size of html files, css, etc that are being sent to your visitor. Once again, smaller file sizes = quicker loading times.
You can learn more about compression here (https://code.google.com/speed/page-speed/docs/payload.html#GzipCompression)
Use A CDN
Content Distribution Networks are a fantastic and cheap way to display media on your website. Rather than have your website send the images for example to the visitor, they load them instead from a CDN such as Amazon’s S3 service. They take the load off your server allowing it to serve more visitors.
CDNs are more for medium to larger sized websites and can make all the difference if you are serving tens/hundreds of thousands of visitors a day.
Use A Caching System
Almost all websites these days use databases. Ecommerce websites and blogs are prime examples of this. As we discussed before, every request you make to a server, slows the loading of a page down and it’s exactly the same with databases. Every time you load a page, the information is being requested from the database then returned to the visitor.
Servers can only handle so many requests per second before they die under the strain of trying to give everyone the information that they have requested. And that’s where caching systems come into play.
Rather than request the information every time a person opens a page, a caching system will call the information once every hour (for example) and “save” the results. Each visitor will get the saved version until it updates again. This is in principle the way in which sites like Facebook deal with the millions of requests their databases get every second.
This tactic is usually only needed for medium to larger websites however if you’re using pre built packages such as Wordpress or Magento then you can implement caching very easily.
Wordpress
My favourite caching plugin for Wordpress is hyper cache. It’s a five minute install/configuration and will help you to deal with lots of traffic or spikes of traffic you may get if your content gets featured on sites like Digg. The link is http://wordpress.org/extend/plugins/hyper-cache/
There are also many other caching plugins for Wordpress that work in a similar way that are easily found with a quick search.
Ecommerce
Most ecommerce packages come with caching built in. Magento for example has a very good built in cache system that works from the go. If you have built your own ecommerce software and are finding that it loads very slowly then you should consider implementing a caching system with memcache for example.
Use CSS Sprites
This is perhaps my favourite little trick of all. CSS sprites are a fantastic way to not only cut down on the number of image requests that you make but also to reduce the overall size of the images.
The concept is simple and elegant. Use one image as a “template” then select only a small section of the template.
The above is a CSS sprite. This one image acts as a template for a lot of buttons, nav headings, icons etc on the website. By using the sprite, the number of requests drops and so does the overall file size.
Pretty cool huh?
Write Good Code
This one may seem obvious but writing clean code that doesn’t unnecessarily repeat itself can make your website much quicker. If you have custom software then it may well be worth moving to a prebuilt solution or having the system rebuilt if none of the above speeds up your site.
Poorly optimised code in the backend will certainly slow a site down no matter how good your frontend efforts are.
If That Isn’t Enough
So, you have done all the above and your site still loads slow. What else can you do?
Check Your Hardware
If you are trying to run a ecommerce store with 20,000 products on it on a single shared host then this may well be your problem. The server hardware and configuration you have may well be the cause of your slow speed.
It may not be able to keep up with what you’re throwing at it day to day. Upgrading your server to a dedicated machine or one that is more powerful may well be the solution. It may also be an option to buy more servers and split up the loads. I.e. One server for files, one server for the database, etc.
Update your software (e.g.: update Wordpress)
If you are using pre-built software such as Wordpress then you may just need to update. Quite often developers will have written much more efficient code and solved a lot of the problems. If you’re using an old version then you won’t be benefiting from their improvements.
Please use caution when you do upgrade though, test the upgrade first on a separate server. Don’t just upgrade your live website and hope nothing breaks, because more often than not…it will break.
Closing Thoughts
I hope that this has given you a taster of how to optimise your websites loading speed. This isn’t a comprehensive guide so I’m sure there are things that haven’t been included that could certainly help you.
My advice is to simply work down the list on Page Speed, try to get as much as possible correct. You’ll never hit 100/100 (believe me I’ve tried – my closest was 98/100) but it will certainly give you a path to follow.
For those who have paid attention this long, you may wonder, why haven’t I talked about YSlow. Both YSlow and PageSpeed perform a similar task, both can offer extra little insights if you dig into the tabs inside of them. YSlow also shows a little loading time in the add on bar which is handy while you’re trying to improve your speed.
I wish you all the best in your endeavours!
What Works For You?
I’d also love to hear what has or hasn’t worked for you in getting your loading times down. It would be great if we could get different insights from everyone else!
